<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>serialize()方法</title>
</head>
<body>

	<!-- serialize()方法的作用：
		1、当用传统非默认提交方式的发送请求参数的时候，用该serialize()方法将表单中数据自动拼接成表单字符串的格式（代替了手动拼接）
		2、、当用传统非默认提交方式的发送请求参数的时要将参数转化成json对象格式，就需要调用以下封装好的函数才能实现
		3、

		 -->



	<!-- 布局 -->
	<form id="form">
		<input type="text" name="username">
		<input type="password" name="password">
		<input type="submit" value="提交">
		<!-- <input type="button" value="提交"> -->

		
	</form>



	<!-- js代码部分 -->
	<script src="./js/jquery-3.4.1.min.js"></script>
	<script type="text/javascript">
		// 给表单加提交事件
		$("#form").on("submit",function(event){

			// 将表单中的内容拼接成字符串格式的参数
			// var params = $("#form").serialize();
			// console.log(params);

			// 调用已经封装好的将表单中用户输入的内存转换成对象格式类型的方法
			 serializeObject($("#form"));
			// 阻止默认提交行为
			event.preventDefault();
			// return false;


			
		})



		//封装将表单中用户输入的内存转换成对象格式类型的方法
		function serializeObject(obj){
			// 处理结果的对象
			var result = {};
			// obj.serializeArry()方法的返回值是一个数组，如[{name:"username",vale:"用户输入的内容"},{name:"password",vale:"用户输入的密码"}]
			var params = obj.serializeArry();
			// 循环数组将数组转换成对象类型
			$.each(params,function(index,value){
				result[value.name]=value.value;

			});
			// console.log(result)
			// 将处理后的结果返回到函数的外部(这个结果会返回给代用的函数)
			return result;


		}


	
	</script>
	
	






</body>
</html>